<template>
  <div class="app-container">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>检验数据详情</span>
          <el-button icon="Back" @click="goBack">返回</el-button>
        </div>
      </template>

      <el-row :gutter="20" v-loading="loading">
        <el-col :span="24">
          <el-descriptions title="基本信息" :column="3" border>
            <el-descriptions-item label="任务编号">
              <el-link type="primary" :underline="false" @click="goToTask">{{ dataInfo.taskCode || '-' }}</el-link>
            </el-descriptions-item>
            <el-descriptions-item label="参数名称">{{ dataInfo.paramName || '-' }}</el-descriptions-item>
            <el-descriptions-item label="参数ID">{{ dataInfo.paramId || '-' }}</el-descriptions-item>
            <el-descriptions-item label="标准值">{{ dataInfo.standardValue || '-' }}</el-descriptions-item>
            <el-descriptions-item label="实测值">{{ dataInfo.measuredValue || '-' }}</el-descriptions-item>
            <el-descriptions-item label="是否合格">
              <el-tag :type="dataInfo.isQualified === 1 ? 'success' : 'danger'">
                {{ dataInfo.isQualified === 1 ? '合格' : '不合格' }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item v-if="dataInfo.isQualified === 0" label="缺陷类型">
              {{ dataInfo.defectName || '-' }}
            </el-descriptions-item>
            <el-descriptions-item v-if="dataInfo.isQualified === 0" label="责任人">
              {{ dataInfo.responsiblePerson || '-' }}
            </el-descriptions-item>
            <el-descriptions-item v-if="dataInfo.isQualified === 0" label="处理结果">
              {{ dataInfo.processResult || '-' }}
            </el-descriptions-item>
            <el-descriptions-item label="创建时间" :span="dataInfo.isQualified === 0 ? 1 : 3">
              {{ parseTime(dataInfo.createTime) || '-' }}
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>

      <el-row style="margin-top: 20px;" v-if="dataInfo.remark">
        <el-col :span="24">
          <el-descriptions title="备注" :column="1" border>
            <el-descriptions-item>{{ dataInfo.remark }}</el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>

      <el-row style="margin-top: 20px;" v-if="dataInfo.defectImagePath">
        <el-col :span="24">
          <el-descriptions title="缺陷图片" :column="1" border>
            <el-descriptions-item>
              <el-image 
                :src="dataInfo.defectImagePath" 
                :preview-src-list="[dataInfo.defectImagePath]"
                style="max-width: 500px; max-height: 500px"
              />
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>

      <el-row style="margin-top: 20px;" v-if="dataInfo.attachmentUrl">
        <el-col :span="24">
          <el-descriptions title="附件" :column="1" border>
            <el-descriptions-item>
              <el-link :href="dataInfo.attachmentUrl" target="_blank" type="primary">
                查看附件
              </el-link>
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { parseTime } from '@/utils/ruoyi';
import { getInspectionData } from '@/api/qep/inspection/data';

const route = useRoute();
const router = useRouter();
const dataId = ref(route.params.id);

// 数据详情
const dataInfo = ref({});
// 加载状态
const loading = ref(false);

/** 查询检验数据详情 */
function getDataDetail() {
  loading.value = true;
  getInspectionData(dataId.value).then(response => {
    dataInfo.value = response.data;
    loading.value = false;
  });
}

/** 返回按钮操作 */
function goBack() {
  router.go(-1);
}

/** 跳转到任务详情 */
function goToTask() {
  router.push(`/inspection/task/detail/${dataInfo.value.taskId}`);
}

onMounted(() => {
  getDataDetail();
});
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style> 